<template>
  <div class="box">

    <section class="login-body">

      <div class="login-content">
        <div class="bg-img">
          <el-carousel :indicator-position="'none'" height="430px" style="width: 100%">
            <el-carousel-item v-for="(item, index) in loginBanner" :key="index">
              <div class="img-banner">
                <img :src="item.imgSrc" alt=""/>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <section class="login-box">
          <hgroup>数字档案室应用系统</hgroup>

          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input type="text"
                        v-model="ruleForm.username"
                        placeholder="请输入用户名"
                        clearable
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password"
                        v-model="ruleForm.password"
                        placeholder="请输入密码"
                        clearable
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="captchaCode">
              <el-input class="input-code"
                        v-model="ruleForm.captchaCode"
                        clearable
                        placeholder="请输入验证码"></el-input>
              <img :src="imgCode" class="img-code" @click="handleGetCode"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         :loading="loading"
                         class="btn-sub"
                         @click="submitForm('ruleForm')">登录
              </el-button>
            </el-form-item>
          </el-form>
        </section>
      </div>

    </section>

  </div>
</template>

<script>
import { getCode } from '@/api/login/login'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data () {
    var validateUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      callback()
    }
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        if (value.length < 6) {
          callback(new Error('密码必须大于6位数'))
        } else {
          callback()
        }
      }, 0)
    }
    var validateCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      }
      callback()
    }
    return {
      loading: false,
      shuitou: [
        {
          imgSrc: require('@/assets/shuitou/banner-1.jpg')
        },
        {
          imgSrc: require('@/assets/shuitou/banner-2.jpg')
        },
        {
          imgSrc: require('@/assets/shuitou/banner-3.jpg')
        },
        {
          imgSrc: require('@/assets/shuitou/banner-4.jpg')
        },
        {
          imgSrc: require('@/assets/shuitou/banner-5.jpg')
        }
      ],
      fuling: [
        {
          imgSrc: require('@/assets/fuling/login-bg.jpg')
        }
      ],
      ruleForm: {
        username: '',
        password: '',
        grant_type: 'password',
        captchaCode: '',
        captchaId: '',
        refresh_token: ''
      },
      rules: {
        username: [
          {
            validator: validateUserName,
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: validatePassword,
            trigger: 'blur'
          }
        ],
        captchaCode: [
          {
            validator: validateCode,
            trigger: 'blur'
          }
        ]
      },
      imgCode: ''
    }
  },
  mounted () {
    this.handleGetCode()
    window.addEventListener('keydown', this.keyDown)
  },
  destroyed () {
    window.removeEventListener('keydown', this.keyDown, false)
  },
  computed: {
    loginBanner () {
      return this[window.service.logoSrc]
    }
  },
  methods: {
    ...mapActions('profile/leftNav', ['getNav']),
    ...mapActions('profile/profile', ['login']),
    handleGetCode () {
      getCode().then((res) => {
        this.imgCode = 'data:image/jpg;base64,' + res.data.data.captchaImg
        this.ruleForm.captchaId = res.data.data.captchaId
      })
    },
    keyDown (e) {
      if (e.keyCode === 13) {
        this.submitForm('ruleForm')
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.login(this.ruleForm).then((res) => {
            if (res) {
              this.$message.success('登录成功')
              this.$router.replace('/')
            } else {
              this.loading = false
              this.handleGetCode()
            }
          }).catch(() => {
            this.loading = false
            this.handleGetCode()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin.scss";

  .box {
    position: relative;
    @include wh(100%, 100%);
    background: linear-gradient(135deg, #409EFF, rgb(83, 168, 255), #409EFF);

  }

  .login-body {
    @include center;
    @include wh(960px, 460px);
    min-width: 420px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2);

    .login-content {
      border-radius: 6px;
      @include fj;
      align-items: center;
      height: 100%;

      .bg-img {
        /*background: url("../../assets/fuling/login-bg.jpg") no-repeat center center;
        background-size: cover;*/
        flex: 1;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;

        .img-banner {
          @include imgBox(100%, 100%);
          img{
            object-fit: cover;
            @include wh(100%, 100%)
          }
        }

      }
    }

  }

  .login-box {
    hgroup {
      @include sc(24px, #333);
      font-weight: bolder;
      text-align: center;
      padding: 15px 0;
      letter-spacing: 2px;
    }

    .demo-ruleForm {
      @include wh(420px, 280px);
      padding-right: 40px;
      padding-top: 10px;

      ::v-deep .el-input__inner {
        border: 1px solid #ccc;
      }

      .input-code {
        width: calc(100% - 140px);
      }

      .img-code {
        @include wh(125px, 40px);
        margin-left: 15px;
        vertical-align: middle;
        cursor: pointer;
      }

      .btn-sub {
        width: 100%;
        border: none;
        background: #409EFF;
      }
    }

  }

  @media screen and (max-width: 1000px) {
    .login-body {
      width: 450px;
      height: 350px;
    }
    .bg-img {
      display: none;
    }
  }
</style>
